<script setup lang="ts">
import echartsDom from "@/views/common/energy/components/echartsDom.vue";
import { subSystemCurveIndicator } from "@/api/modules/energy";
import { useRouterStoreHook } from "@/store/modules/router";
import { ref } from "vue";

interface Props {
  /**  有 title 时传入 */
  energyTitle?: string;
  title?: string;
  /**  有按钮时传入，传入后会有 btn-click 事件 */
  button?: string;
  activeName?: string;
  /**  title 栏右侧文字 */
  // rightText?: string | number;
  /**  模块最低宽度，默认 330px */
  width?: number;
  /**  模块最低高度，默认 200px */
  height?: number;
  /**  是否需要背景阴影，默认为true */
  boxShadow?: boolean;
  /**  是否需要圆角，默认为true */
  borderRidus?: boolean;
  /**是否搜索 */
  isSerch?: boolean;
  /**科室 */
  className?: any;
  /**能源类型 */
  energyType?: string;
  queryTimeType?: string;
  queryParams?: any;
  dateRange?: any;
  dictKeyList: Array<any>;
  showDetails?: boolean;
}

type itemStyleType = {
  [key: string]: string;
};

interface dataType {
  name: string;
  value: number;
  itemStyle?: itemStyleType;
}

interface Emits {
  /**  title 右侧按钮点击后触发 */
  (event: "btn-click"): void;
}

const emits = defineEmits<Emits>();

const props = withDefaults(defineProps<Props>(), {});
const routerStore = useRouterStoreHook();

const handleBtnClick = () => {
  emits("btn-click");
};

const options = ref<CommonEcharts.CommonEchartsOption>(null);

// 获取对象数组某一项value组成的数组
const getValueList = (arr: any[], key: number | string) => {
  let valueList = [];
  arr.forEach(item => {
    valueList.push(item[key]);
  });
  return valueList;
};

const getParams = (val: any) => {
  return {
    ...props.queryParams,
    startTime: props.dateRange && props.dateRange.length ? props.dateRange[0] : props.queryParams.startTime,
    endTime: props.dateRange && props.dateRange.length ? props.dateRange[1] : props.queryParams.endTime,
    energyType: props.energyType,
    className: props.className,
    queryTimeType: props.queryTimeType,
    dictKey: val.dictKey
  };
};

// 用于存储子系统指标
const indicatorKeyList = ref<any>([]);

const labelLayoutLeftFn = async (ec: any) => {
  const title = "Module";
  const isWater = ec.energyType === "HOT_WATER";
  const params = getParams(ec);
  let res: any = await subSystemCurveIndicator(params);
  let legendData = [];
  let xData = [];
  let seriesData = [];
  let seriesDataCompareIndicator = [];
  let unit = "";
  let legendSelected = {};
  if (!res.indicatorList) return;
  let resData: any = JSON.parse(JSON.stringify(res));
  resData.indicatorList.forEach((item: any) => {
    legendData.push(item.label.name);
    legendSelected[item.label.name] = true;
    unit = item.label.unit;
    xData = getValueList(item.detail, "timeFormat");
    seriesData.push({
      name: item.label.name,
      type: "line",
      data: getValueList(item.detail, "value"),
      emphasis: {
        focus: "series"
      }
    });
    seriesDataCompareIndicator.push({
      name: item.label.name,
      indicatorKey: item.label.indicatorKey,
      unit: item.label.unit
    });
    options.value = labelLayoutFnLine(ec, legendSelected, legendData, xData, seriesData, unit, title);
  });
};

// 曲线图
const labelLayoutFnLine = (ec: any, legendSelected: any, legendData: any, xData: any, seriesData: any, unit: string, title: string) => {
  const { getWidth } = ec;
  const labelLayout = function (params) {
    const isLeft = params.labelRect.x < getWidth() / 2;
    const points = params.labelLinePoints;
    points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
    return { labelLinePoints: points };
  };
  const options: CommonEcharts.CommonEchartsOption = {
    tooltip: {
      trigger: "axis"
    },
    legend: {
      type: "scroll", // 设置图例分页类型为滚动
      icon: "rect",
      orient: "horizontal", // 水平排列
      right: "center", // 水平居中
      itemWidth: 37, // 图例标记的图形宽度
      itemHeight: 13, // 图例标记的图形高度
      selected: {},
      data: []
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      data: []
    },
    yAxis: {
      type: "value",
      name: "千瓦时"
    },
    series: []
  };
  return options;
};
</script>

<template>
  <div>
    <div class="con_bot">
      <div v-for="item in dictKeyList" :key="item.dictKey" class="con_bot_item">
        <echartsDom
          v-if="item.type === 'LINE'"
          :dictKey="item.dictKey"
          :data="item.data"
          width="100%"
          height="310px"
          :title="item.title"
          :options="options"
          :button="showDetails ? '' : '详情'"
          :isSerch="isSerch"
          :energyType="item.energyType"
          :className="routerStore.subject"
          :queryTimeType="queryTimeType"
          :queryParams="queryParams"
          :dateRange="dateRange"
          :showDetails="showDetails"
          @btn-click="handleBtnClick"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.con_bot {
  width: 100%;

  .con_bot_item {
    width: 100%;
  }
}
</style>
